<template>
  <div class="privacy-policy" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
    <!-- 顶部自定义导航（统一为 my-donations 风格） -->
    <tn-nav-bar fixed customBack :bottomShadow="false" backgroundColor="#2c6e31">
      <view slot="back" class="tn-custom-nav-bar__back" @click="goBack">
        <text class="icon tn-icon-left"></text>
      </view>
    </tn-nav-bar>
    <header class="policy-header">
      <div class="container">
        <div class="header-content">
          
          
          <div class="logo">
            <img src="https://ts1.tc.mm.bing.net/th/id/R-C.a1bc3feb63298bcb2f5a51aa754cf6f0?rik=oKAySL64KBJVsw&riu=http%3a%2f%2fwww.xuexili.com%2fuploads%2fallimg%2f2304%2f151632B45-2.jpg&ehk=DYYBJ2XVYGgIg1UfCBtuljQynx4IOr4uWkQfdI9hgPk%3d&risl=&pid=ImgRaw&r=0" alt="吉林农业科技学院校徽" class="school-logo">
            <div class="school-name">
              <h1>吉林农业科技学院</h1>
              <p>校友会</p>
            </div>
          </div>
          
          <nav class="main-nav">
            <ul>
              <li><a href="#" class="nav-link">首页</a></li>
              <li><a href="#" class="nav-link">关于我们</a></li>
              <li><a href="#" class="nav-link">校友活动</a></li>
              <li><a href="#" class="nav-link">联系我们</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </header>

    <!-- 主要内容区 -->
    <main class="policy-content">
      <div class="container">
        <div class="policy-header-section">
          <h2>隐私政策</h2>
          <p class="policy-date">生效日期：2023年9月1日</p>
          <p class="policy-intro">
            吉林农业科技学院校友会（以下简称"校友会"）尊重并保护所有使用校友会服务用户的个人隐私权。为了给您提供更准确、更有个性化的服务，校友会会按照本隐私权政策的规定使用和披露您的个人信息。但校友会将以高度的勤勉、审慎义务对待这些信息。除本隐私权政策另有规定外，在未征得您事先许可的情况下，校友会不会将这些信息对外披露或向第三方提供。校友会会不时更新本隐私权政策。您在同意校友会服务使用协议之时，即视为您已经同意本隐私权政策全部内容。本隐私权政策属于校友会服务使用协议不可分割的一部分。
          </p>
        </div>

        <!-- 目录导航 -->
        <div class="policy-toc">
          <h3>目录</h3>
          <ul>
            <li v-for="(section, index) in sections" :key="index">
              <a :href="'#section-' + (index + 1)" @click="scrollToSection(index)">{{ section.title }}</a>
            </li>
          </ul>
        </div>

        <!-- 政策内容 -->
        <div class="policy-sections">
          <div 
            v-for="(section, index) in sections" 
            :key="index" 
            :id="'section-' + (index + 1)"
            class="policy-section"
          >
            <h3 class="section-title">{{ index + 1 }}. {{ section.title }}</h3>
            <div class="section-content" v-html="section.content"></div>
          </div>
        </div>

        <!-- 确认区域 -->
        <div class="policy-confirmation">
          <p>感谢您阅读我们的隐私政策。我们致力于保护您的个人信息和隐私安全。</p>
          <div class="confirmation-buttons">
            <button class="btn agree-btn">我已阅读并同意</button>
            <button class="btn download-btn">下载隐私政策</button>
          </div>
        </div>
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="policy-footer">
      <div class="container">
        <div class="footer-content">
          <div class="contact-info">
            <h4>吉林农业科技学院校友会</h4>
            <p>地址：吉林省吉林市吉林经济技术开发区翰林路77号</p>
            <p>电话：0432-63509000</p>
            <p>邮箱：alumni@jlauct.edu.cn</p>
          </div>
          <div class="copyright">
            <p>&copy; {{ new Date().getFullYear() }} 吉林农业科技学院校友会 版权所有</p>
            <p>本隐私政策可能不时更新，请定期查阅</p>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
  name: 'PrivacyPolicy',
  mixins: [template_page_mixin],
  data() {
    return {
      sections: [
        {
          title: '适用范围',
          content: `
            <p>1.1 在您注册校友会账号时，您根据校友会要求提供的个人注册信息；</p>
            <p>1.2 在您使用校友会服务，或访问校友会平台网页时，校友会自动接收并记录的您的浏览器和计算机上的信息，包括但不限于您的IP地址、浏览器的类型、使用的语言、访问日期和时间、软硬件特征信息及您需求的网页记录等数据；</p>
            <p>1.3 校友会通过合法途径从商业伙伴处取得的用户个人数据。</p>
            <p>1.4 您了解并同意，以下信息不适用本隐私权政策：</p>
            <p>1.4.1 您在使用校友会平台提供的搜索服务时输入的关键字信息；</p>
            <p>1.4.2 校友会收集到的您在校友会发布的有关信息数据，包括但不限于参与讨论的内容、发布的文章等信息；</p>
            <p>1.4.3 违反法律规定或违反校友会规则行为及校友会已对您采取的措施。</p>
          `
        },
        {
          title: '信息使用',
          content: `
            <p>2.1 校友会不会向任何无关第三方提供、出售、出租、分享或交易您的个人信息，除非事先得到您的许可，或该第三方和校友会（含校友会关联公司）单独或共同为您提供服务，且在该服务结束后，其将被禁止访问包括其以前能够访问的所有这些资料。</p>
            <p>2.2 校友会亦不允许任何第三方以任何手段收集、编辑、出售或者无偿传播您的个人信息。任何校友会平台用户如从事上述活动，一经发现，校友会有权立即终止与该用户的服务协议。</p>
            <p>2.3 为服务用户的目的，校友会可能通过使用您的个人信息，向您提供您感兴趣的信息，包括但不限于向您发出活动和服务信息，或者与校友会合作伙伴共享信息以便他们向您发送有关其产品和服务的信息（后者需要您的事先同意）。</p>
          `
        },
        {
          title: '信息披露',
          content: `
            <p>3.1 在如下情况下，校友会将依据您的个人意愿或法律的规定全部或部分的披露您的个人信息：</p>
            <p>3.1.1 经您事先同意，向第三方披露；</p>
            <p>3.1.2 为提供您所要求的产品和服务，而必须和第三方分享您的个人信息；</p>
            <p>3.1.3 根据法律的有关规定，或者行政或司法机构的要求，向第三方或者行政、司法机构披露；</p>
            <p>3.1.4 如您出现违反中国有关法律、法规或者校友会服务协议或相关规则的情况，需要向第三方披露；</p>
            <p>3.1.5 如您是适格的知识产权投诉人并已提起投诉，应被投诉人要求，向被投诉人披露，以便双方处理可能的权利纠纷；</p>
            <p>3.1.6 在校友会平台上创建的某一交易中，如交易任何一方履行或部分履行了交易义务并提出信息披露请求的，校友会有权决定向该用户提供其交易对方的联络方式等必要信息，以促成交易的完成或纠纷的解决。</p>
            <p>3.1.7 其它校友会根据法律、法规或者网站政策认为合适的披露。</p>
          `
        },
        {
          title: '信息存储和交换',
          content: `
            <p>4.1 您的个人信息将存储于中华人民共和国境内。如因业务需要向境外机构传输个人信息的，校友会将确保符合相关法律规定，并获得您的授权同意。</p>
            <p>4.2 校友会收集的有关您的信息和资料将保存在校友会及（或）其关联公司的服务器上，这些信息和资料可能传送至您所在国家、地区或校友会收集信息和资料所在地的境外并在境外被访问、存储和展示。</p>
          `
        },
        {
          title: 'Cookie的使用',
          content: `
            <p>5.1 在您未拒绝接受cookies的情况下，校友会会在您的计算机上设定或取用cookies，以便您能登录或使用依赖于cookies的校友会平台服务或功能。校友会使用cookies可为您提供更加周到的个性化服务，包括推广服务。</p>
            <p>5.2 您有权选择接受或拒绝接受cookies。您可以通过修改浏览器设置的方式拒绝接受cookies。但如果您选择拒绝接受cookies，则可能无法登录或使用依赖于cookies的校友会网络服务或功能。</p>
            <p>5.3 通过校友会所设cookies所取得的有关信息，将适用本政策。</p>
          `
        },
        {
          title: '信息安全',
          content: `
            <p>6.1 校友会帐号均有安全保护功能，请妥善保管您的用户名及密码信息。校友会将通过对用户密码进行加密等安全措施确保您的信息不丢失，不被滥用和变造。尽管有前述安全措施，但同时也请您注意在信息网络上不存在"绝对的安全措施"。</p>
            <p>6.2 在使用校友会网络服务进行网上交易时，您不可避免的要向交易对方或潜在的交易对方披露自己的个人信息，如联络方式或者邮政地址。请您妥善保护自己的个人信息，仅在必要的情形下向他人提供。如您发现自己的个人信息泄密，尤其是校友会用户名及密码发生泄露，请您立即联络校友会客服，以便校友会采取相应措施。</p>
          `
        },
        {
          title: '未成年人保护',
          content: `
            <p>7.1 校友会非常重视对未成年人个人信息的保护。若您是18周岁以下的未成年人，在使用校友会的服务前，应事先取得您家长或法定监护人的同意。</p>
            <p>7.2 校友会将根据国家相关法律法规的规定保护未成年人的个人信息。</p>
          `
        },
        {
          title: '政策修订',
          content: `
            <p>8.1 本政策可能会不时更新。我们会通过在本页面发布更新版本来通知您任何更改。</p>
            <p>8.2 我们建议您定期查阅本隐私政策，以了解我们如何保护您的信息。</p>
            <p>8.3 若您继续使用校友会服务，即表示您同意我们按照更新后的隐私政策处理您的个人信息。</p>
          `
        },
        {
          title: '联系我们',
          content: `
            <p>9.1 如您对本隐私政策或个人信息保护有任何疑问、意见或建议，可通过以下方式与我们联系：</p>
            <p>9.1.1 电子邮件：alumni@jlauct.edu.cn</p>
            <p>9.1.2 电话：0432-63509000</p>
            <p>9.1.3 邮寄地址：吉林省吉林市吉林经济技术开发区翰林路77号 吉林农业科技学院校友会办公室（邮编：132101）</p>
            <p>9.2 我们将在收到您的疑问、意见或建议后，在合理时间内予以回复。</p>
          `
        }
      ]
    };
  },
  methods: {
    scrollToSection(index) {
      // 移除所有激活状态
      document.querySelectorAll('.policy-toc a').forEach(item => {
        item.classList.remove('active');
      });
      // 给当前点击项添加激活状态
      document.querySelectorAll('.policy-toc a')[index].classList.add('active');
      
      // 滚动到对应章节
      const element = document.getElementById(`section-${index + 1}`);
      if (element) {
        window.scrollTo({
          top: element.offsetTop - 80,
          behavior: 'smooth'
        });
      }
    },
    goBack() {
      window.history.back();
    },
    // 滚动时自动高亮对应目录项
    highlightTocOnScroll() {
      const sections = document.querySelectorAll('.policy-section');
      const tocLinks = document.querySelectorAll('.policy-toc a');
      
      sections.forEach((section, index) => {
        const rect = section.getBoundingClientRect();
        if (rect.top <= 100 && rect.bottom >= 100) {
          tocLinks.forEach(link => link.classList.remove('active'));
          tocLinks[index].classList.add('active');
        }
      });
    }
  },
  mounted() {
    window.addEventListener('scroll', this.highlightTocOnScroll);
    // 初始化时高亮第一个目录项
    setTimeout(() => {
      document.querySelector('.policy-toc a')?.classList.add('active');
    }, 100);
  },
  beforeUnmount() {
    window.removeEventListener('scroll', this.highlightTocOnScroll);
  }
};
</script>

<style scoped>
/* 基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 头部样式 */
.policy-header {
  background-color: #2c6e31;
  color: white;
  padding: 15px 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

/* 统一返回按钮样式（与 my-donations 保持一致） */
.tn-custom-nav-bar__back {
  width: 60%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  font-size: 18px;
}

.tn-custom-nav-bar__back .icon {
  display: block;
  flex: 1;
  margin: auto;
  text-align: center;
}

/* 图标字体兼容 */
.tn-icon-left::before {
  content: "←";
}

.tn-icon-home-capsule-fill::before {
  content: "⌂";
}

.logo {
  display: flex;
  align-items: center;
  flex: 1;
}

.school-logo {
  width: 60px;
  height: 60px;
  margin-right: 15px;
  border-radius: 50%;
  background-color: white;
  padding: 5px;
}

.school-name h1 {
  font-size: 1.5rem;
  margin-bottom: 5px;
}

.school-name p {
  font-size: 0.9rem;
  opacity: 0.9;
}

.main-nav ul {
  display: flex;
  list-style: none;
}

.main-nav li {
  margin-left: 25px;
}

.nav-link {
  color: white;
  text-decoration: none;
  font-size: 0.95rem;
  transition: opacity 0.3s;
  padding: 5px 0;
  position: relative;
}

.nav-link:after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: white;
  transition: width 0.3s;
}

.nav-link:hover:after {
  width: 100%;
}

/* 主要内容区样式 */
.policy-content {
  padding: 40px 0;
  background-color: #f9f9f9;
  min-height: calc(100vh - 230px);
}

.policy-header-section {
  text-align: center;
  margin-bottom: 40px;
}

.policy-header-section h2 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.policy-header-section p {
  font-size: 1rem;
  color: #666;
}

/* 目录样式 */
.policy-toc {
  background-color: #ffffff;
  border: 1px solid #e8f4e9;
  border-radius: 8px;
  padding: 25px;
  margin-bottom: 40px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.policy-toc h3 {
  font-size: 1.3rem;
  color: #2c6e31;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e8f4e9;
  font-weight: 600;
}

.policy-toc ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.policy-toc a {
  display: inline-block;
  color: #333333;
  text-decoration: none;
  font-size: 0.95rem;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.25s ease;
}

.policy-toc a:hover {
  background-color: #f0f7f1;
  color: #2c6e31;
  transform: translateX(4px);
}

.policy-toc a.active {
  background-color: #2c6e31;
  color: #ffffff;
  font-weight: 500;
}

/* 政策内容样式 */
.policy-section {
  margin-bottom: 40px;
  padding: 30px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.policy-section h3 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #2c6e31;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f7f1;
}

.policy-section p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 15px;
  color: #444444;
}

/* 确认区域样式 */
.policy-confirmation {
  text-align: center;
  margin-top: 60px;
  padding: 30px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.policy-confirmation p {
  font-size: 1.1rem;
  margin-bottom: 25px;
  color: #555555;
}

.confirmation-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.btn {
  padding: 12px 30px;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.agree-btn {
  background-color: #2c6e31;
  color: white;
}

.agree-btn:hover {
  background-color: #245a28;
  transform: translateY(-2px);
}

.download-btn {
  background-color: #ffffff;
  color: #2c6e31;
  border: 1px solid #2c6e31;
}

.download-btn:hover {
  background-color: #f0f7f1;
  transform: translateY(-2px);
}

/* 页脚样式 */
.policy-footer {
  background-color: #2c6e31;
  color: white;
  padding: 40px 0 20px;
  font-size: 0.9rem;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.contact-info {
  margin-bottom: 20px;
}

.contact-info h4 {
  font-size: 1.2rem;
  margin-bottom: 15px;
}

.contact-info p {
  margin-bottom: 8px;
  opacity: 0.9;
}

.copyright {
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.copyright p {
  margin-bottom: 5px;
  opacity: 0.8;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .main-nav ul {
    margin-top: 20px;
  }

  .main-nav li {
    margin-left: 10px;
  }

  .nav-link {
    font-size: 0.85rem;
  }

  .policy-header-section h2 {
    font-size: 2rem;
  }

  .policy-toc {
    padding: 18px;
  }
  
  .policy-toc ul {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .policy-toc a {
    padding: 6px 10px;
    font-size: 0.9rem;
  }

  .policy-section {
    padding: 20px;
  }

  .policy-section h3 {
    font-size: 1.5rem;
  }

  .policy-section p {
    font-size: 0.9rem;
  }

  .confirmation-buttons {
    flex-direction: column;
    gap: 15px;
  }

  .btn {
    width: 100%;
    padding: 12px 0;
  }
}
</style>